import { Component } from '@angular/core';
import { NgxRawUiComponent } from "../../../../ngx-raw-ui/src/lib/ngx-raw-ui.component";
import { NgxRawTreeBarComponent, TreeItem } from 'ngx-raw-ui';


@Component({
  selector: 'app-first-page',
  standalone: true,
  imports: [NgxRawUiComponent,
    NgxRawTreeBarComponent

  ],
  // templateUrl: './first-page.component.html',
  styleUrl: './first-page.component.scss',
  template: ` 
  <div class="first-page">
    <lib-ngx-raw-ui [name]="name"></lib-ngx-raw-ui>

    <lib-ngx-raw-tree-bar [treeData]="data"/>
   
  </div>
  `
})
export class FirstPageComponent {
  constructor() { }
  name = "First Page"

  data: TreeItem[] = [
    {
      id: 1,
      name: 'Parent 1',
      expanded: true,
      children: [
        { id: 2, name: 'Child 1.1', parent: 1 },
        {
          id: 3, name: 'Child 1.2', parent: 1,
          children: [{ id: 4, name: 'Grandchild 1.2.1', parent: 3 }]
        },
      ],
    },
    {
      id: 5,
      name: 'Parent 2',
      children: [{ id: 6, name: 'Child 2.1', parent: 5 }],
    },
    {
      id: 7,
      name: 'Parent 3',
    },
  ];
}
